<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BLOG</title>

    <!-- 动画库 -->

    <link rel="stylesheet" href="css/animate.min.css">

    <!-- bootstrap核心css -->

    <link rel="stylesheet" href="css/bootstrap.min.css">

    <!-- 重置样式 -->

    <link rel="stylesheet" href="css/reset.less">

    <link rel="stylesheet" href="css/blog.css">

</head>

<body>
    <div class="content">

        <!-- left -->

        <div class="left">
            <div class="header">
                <img src="./images/kappe.png" alt="" class="pic-one">
                <img src="./images/forcreatives.png" alt="" class="pic-two">
            </div>

            <ul class="nav">
                <a href="index.html">
                    <li class="Home">Home</li>
                </a>
                <a href="work.html">
                    <li>Work</li>
                </a>
                <a href="about.html">
                    <li>About</li>
                </a>
                <a href="blog.html">
                    <li class="Blog">Blog</li>
                </a>
                <a href="#">
                    <li>Services</li>
                </a>
                <a href="contact.html">
                    <li>Contact</li>
                </a>
            </ul>

            <div class="Filter">
                <p>Filter<span class="glyphicon glyphicon-th-large Filter-right"></span></p>
                <ul class="nav-bottom">
                    <a href="#" class="firt-a">
                        <li>All Works</li>
                    </a>
                    <a href="#">
                        <li>web design</li>
                    </a>
                    <a href="#">
                        <li>illustration</li>
                    </a>
                    <a href="#">
                        <li>photography</li>
                    </a>
                    <a href="#">
                        <li>wallpapers</li>
                    </a>
                    <a href="#">
                        <li>brochures</li>
                    </a>

                </ul>
            </div>

            <div class="left-bottom">
                <div class="share">
                    <img src="./images/webicon-flickr.png" alt="">
                    <img src="./images/webicon-googleplus.png" alt="">
                    <img src="./images/webicon-twitter.png" alt="">
                    <img src="./images/webicon-pinterest.png" alt="">
                    <img src="./images/webicon-dribbble.png" alt="">
                    <img src="./images/webicon-behance.png" alt="">
                    <img src="./images/webicon-facebook.png" alt="">
                </div>

                <div class="text">© 2014 Kappe, All Rights Reserved</div>

            </div>

        </div>

        <!-- right -->

        <div class="right container-fluid">
            <input type="checkbox" name="ck" id="ck">
            <label for="ck" class="right-fixed">
                <img src="./images/.png" alt="">
                <div class="circle"></div>
            </label>
            <div class="msg">
                <a href="#">
                    <p><img src="./images/phone.png" alt=""><span>9930 1234 5679</span></p>
                </a>
                <a href="#">
                    <p><img src="./images/msg.png" alt=""><span>Contact@domain.com</span></p>
                </a>
                <a href="#">
                    <p><img src="./images/home.png" alt=""><span>street address example</span></p>
                </a>
            </div>
            <div class="flex-box">

                <!-- f-one -->

                <div class="f-one">
                    <img src="./images04/Layer53.png" alt="">
                    <div class="fiex-one"><span class="glyphicon glyphicon-menu-left"></span></div>
                    <div class="fiex-two"><span class="glyphicon glyphicon-menu-right"></span></div>
                    <div>
                        <h4>Gallery Post Example</h4>
                        <p>A man who works with his hands is a laborer; a man who works with his hand s and his brain is
                            a craftsman; but a man who</p>
                    </div>
                    <div class="hr"></div>
                    <div class="smalltub">
                        <div class="tubiao-One">3 comments</div>
                        <div class="tubiao-Two">Dec 19, 2013</div>
                    </div>
                </div>

                <!-- f-two -->

                <div class="f-two">
                    <img src="./images04/Layer62.png" alt="">
                    <div class="xuanT">
                        <div class="xuanT-yuan">
                            <span class="glyphicon glyphicon-arrow-right rightJT"></span>
                        </div>
                    </div>
                </div>

                <!-- f-three -->

                <div class="f-three">
                    <p>Another Post where you can
                        put a link to a specific website</p>
                    <p><i>http://www.themeforest.net</i></p>
                </div>

                <!-- f-four -->

                <div class="f-four">
                    <p>Another Post where you can
                        put a link to a specific website</p>
                    <p><i>http://www.themeforest.net</i></p>
                </div>

                <!-- f-five -->

                <div class="f-five">
                    <img src="./images04/Layer54.png" alt="">
                    <ul>
                        <li></li>
                        <li>
                            <div class="li-bigBox">
                                <div></div>
                                <div></div>
                                <div></div>
                            </div>
                        </li>
                        <li>
                            <div class="li-box">
                                <div></div>
                            </div>
                        </li>
                    </ul>
                    <div class="bottom-while">
                        <h4>Gallery Post Example</h4>
                        <p>A man who works with his hands is a laborer; a man who works with his hand s and his brain is
                            a craftsman; but a man who</p>
                    </div>
                    <div class="hr"></div>
                    <div class="smalltub">
                        <div class="tubiao-One">3 comments</div>
                        <div class="tubiao-Two">Dec 19, 2013</div>
                    </div>
                </div>

                <!-- f-sive -->

                <div class="f-sive">
                    <img src="./images04/Layer59.png" alt="">
                    <div class="bottom-while">
                        <h4>Gallery Post Example</h4>
                        <p>A man who works with his hands is a laborer; a man who works with his hand s and his brain is
                            a craftsman; but a man who</p>
                    </div>
                    <div class="hr"></div>
                    <div class="smalltub">
                        <div class="tubiao-One">3 comments</div>
                        <div class="tubiao-Two">Dec 19, 2013</div>
                    </div>
                </div>

                <!-- f-seven -->

                <div class="f-two">
                    <img src="./images04/Layer62.png" alt="">
                    <div class="xuanT">
                        <div class="xuanT-yuan">
                            <span class="glyphicon glyphicon-arrow-right rightJT"></span>
                        </div>
                    </div>
                </div>

                <!-- f-eight -->

                <div class="f-sive">
                    <img src="./images04/Layer61.png" alt="">
                    <div class="bottom-while">
                        <h4>Gallery Post Example</h4>
                        <p>A man who works with his hands is a laborer; a man who works with his hand s and his brain is
                            a craftsman; but a man who</p>
                    </div>
                    <div class="hr"></div>
                    <div class="smalltub">
                        <div class="tubiao-One">3 comments</div>
                        <div class="tubiao-Two">Dec 19, 2013</div>
                    </div>
                </div>

                <!-- f-nine -->

                <div class="f-nine">
                    <div class="bottom-while">
                        <h4 class="nine">Aside Post Format</h4>
                        <p class="nine-p">This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit
                            auctor aliquet.
                            Aenean sollicitudin</p>
                    </div>
                </div>

                <!-- f-ten -->

                <div class="f-ten">
                    <p>Older Posts</p>
                </div>

                <!-- f-eleven -->

                <div class="f-eleven">
                    <p><i>Logic will get you from A to B. Imagination will take you everywhere</i></p>
                    <p>“</p>
                    <p>Albert Einstein</p>
                </div>

                <!-- f-twelve -->

                <div class="f-sive">
                    <img src="./images04/Layer59.png" alt="">
                    <div class="bottom-while">
                        <h4>Gallery Post Example</h4>
                        <p>A man who works with his hands is a laborer; a man who works with his hand s and his brain is
                            a craftsman; but a man who</p>
                    </div>
                    <div class="hr"></div>
                    <div class="smalltub">
                        <div class="tubiao-One">3 comments</div>
                        <div class="tubiao-Two">Dec 19, 2013</div>
                    </div>
                </div>

                <!-- f-thirteen -->

                <div class="f-five">
                    <img src="./images04/Layer60.png" alt="">
                    <ul>
                        <li></li>
                        <li>
                            <div class="li-bigBox">
                                <div></div>
                                <div></div>
                                <div></div>
                            </div>
                        </li>
                        <li>
                            <div class="li-box">
                                <div></div>
                            </div>
                        </li>
                    </ul>
                    <div class="bottom-while">
                        <h4>Gallery Post Example</h4>
                        <p>A man who works with his hands is a laborer; a man who works with his hand s and his brain is
                            a craftsman; but a man who</p>
                    </div>
                    <div class="hr"></div>
                    <div class="smalltub">
                        <div class="tubiao-One">3 comments</div>
                        <div class="tubiao-Two">Dec 19, 2013</div>
                    </div>
                </div>

                <!-- f-fourteen -->

                <div class="f-one">
                    <img src="./images04/Layer56.png" alt="">
                    <div class="fiex-one"><span class="glyphicon glyphicon-menu-left"></span></div>
                    <div class="fiex-two"><span class="glyphicon glyphicon-menu-right"></span></div>
                    <div>
                        <h4>Gallery Post Example</h4>
                        <p>A man who works with his hands is a laborer; a man who works with his hand s and his brain is
                            a craftsman; but a man who</p>
                    </div>
                    <div class="hr"></div>
                    <div class="smalltub">
                        <div class="tubiao-One">3 comments</div>
                        <div class="tubiao-Two">Dec 19, 2013</div>
                    </div>
                </div>

                <!-- f-fifteen -->

                <div class="f-sive">
                    <img src="./images04/Layer59.png" alt="">
                    <div class="bottom-while">
                        <h4>Gallery Post Example</h4>
                        <p>A man who works with his hands is a laborer; a man who works with his hand s and his brain is
                            a craftsman; but a man who</p>
                    </div>
                    <div class="hr"></div>
                    <div class="smalltub">
                        <div class="tubiao-One">3 comments</div>
                        <div class="tubiao-Two">Dec 19, 2013</div>
                    </div>
                </div>


            </div>
        </div>
    </div>
</body>

</html>

<!-- jq库 -->

<script src="js/jquery-3.5.1.min.js"></script>

<!-- bootstrap核心js -->

<script src="js/bootstrap.min.js"></script>